<template>
	<view class="vipPage u-p-x-32 u-p-t-20">
		<!-- 头部 -->
		<view class="vip-head b-r-48 ">
			<view class="vip-top">
				<view class="user" v-if="version == 1">
					<image class="user-img"
						:src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/' + useInfo.headImg" mode="">
					</image>
					<view class="u-flex u-flex-col u-row-left u-col-top u-m-l-20">
						<text class="user-text" style="line-height: 60rpx;">{{useInfo.usrName}}</text>
						<view style="background-color:#0083D4;color: white;"
							class="u-flex user-box  b-r-32  u-p-y-2 u-p-l-4 u-p-r-16 u-m-l-10">
							<image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"
								src="https://job.ydylmold.cn/mingpian/image/vipPage/mobi.png"></image>
							<text>{{availableTimes}}</text>
						</view>
					</view>
				</view>
				<view class="user" v-else>
					<image class="user-img"
						:src="'https://www.ydylmold.cn/images/ydylapp/usrCompany/image/' + useInfo.companyLogo"
						mode="">
					</image>
					<view class="u-flex u-flex-col u-row-left u-col-top">
						<text class="user-text">{{useInfo.companyNameCn}}</text>
						<view style="background-color:#0083D4;color: white;"
							class="u-flex user-box  b-r-32  u-p-y-2 u-p-l-4 u-p-r-16 u-m-l-10">
							<image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"
								src="https://job.ydylmold.cn/mingpian/image/vipPage/mobi.png"></image>
							<text>{{availableTimes}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 文案 -->
		<view style="color: #FA3737;" class="u-m-t-16 u-font-26 u-weight-500 u-m-l-10"> 新用户可免费体验5次极速联系和添加好友,20次文案引流 </view>
		<view style="background-color: white;flex-wrap: wrap;"
			class="b-r-48 u-p-y-24 u-p-x-48 u-m-t-30 u-flex u-row-between u-col-center">
			<view class="u-flex-col u-col-center u-m-b-10 " v-for="(item,index) in avaTimesList">
				<view>
					<image style="width: 68rpx;height: 68rpx;"
						:src="item.setName=='极速联系'?lianxi:item.setName=='添加好友'?jiahaoyou:tuiguan"></image>
				</view>
				<view style="color: #2BADFD;" class="u-font-28 u-weight-700">{{item.setName}}</view>
				<view style="border: 1rpx solid #2BADFD;color: #2BADFD;"
					class="u-m-t-10 b-r-48 u-font-24 u-weight-500 u-p-x-16 u-p-y-4">{{item.rate}}币/次</view>
			</view>
		</view>
		<!-- 选择套餐 -->
		<view class="u-m-t-52">
			<view class="u-flex ">
				<text class="u-font-32 u-weight-700 u-m-r-24">选择套餐</text>
				<text style="color:#808080;" class="u-font-24 u-weight-500">(1人民币={{rmbRate}}模币)</text>
			</view>
			<!-- 套餐列表 -->
			<view class="con-list2" v-if="swiperList[currentswiperIndex].listItem">
				<view @click="serviceClick(item,index)" class="con-list2-item"
					:style="itemIndex == index?'border: 4rpx solid #2BADFD;background-color:#DEF2FF;':''"
					:class="swiperList[currentswiperIndex].listItem&&swiperList[currentswiperIndex].listItem.length>2?'con-list2-itemafter':'con-list2-itemafter1'"
					v-for="(item,index) in swiperList[currentswiperIndex].listItem" :key="index">
					<text :style="itemIndex == index?'background-color:#2BADFD;':''"
						class="list2-text1">{{item.itemName}}</text>
					<view class="u-flex ">
						<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
							src="https://job.ydylmold.cn/mingpian/image/vipPage/mobi.png"></image>
						<text style="color:#808080;font-size: 32rpx;font-weight: 500;">{{item.qty}}个</text>
					</view>
					<text class="list2-text2"><text style="font-size: 36rpx;">¥</text>{{item.price}}</text>
					<text style="color:#FA3737; font-size: 28rpx;">优惠¥{{(item.discountAmt).toFixed(2)}}</text>
				</view>
			</view>
			<!-- 自定义套餐 -->
			<view @click="customClick" class="custom">自定义购买</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="popupBox u-flex-col">
				<view class="u-flex u-row-between u-m-b-50">
					<view class="u-font-36 u-weight-600">输入模币数量</view>
					<view @click="closePopup">
						<u-icon name="close-circle" color="#000000" size="20"></u-icon>
					</view>
				</view>
				<view class="u-flex ">
					<view class="inputText u-flex">
						<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
							src="https://job.ydylmold.cn/mingpian/image/vipPage/mobi.png"></image>
						<input style="width: 230rpx;" maxlength="4" v-model="inputValue" class="uni-input" @input="onKeyInput"
							placeholder="输入模币数量" />
					</view>
					<text>个</text>
				</view>
				<view class="u-flex  u-row-between u-m-y-50">
					<view class="u-font-28 u-weight-500">合计:¥<text class="u-font-36 u-weight-700">{{customtotalprice}}</text></view>
					<text style=" color:#FA3737;" class="u-font-28 u-weight-500">优惠￥{{customdiscountprice}}</text>
				</view>
				<view class="u-flex  u-row-around ">
					<view @click="closePopup" style="color:#2BADFD;" class="popupBtn">取消</view>
					<view @click="popupPay" style="color: white;background-color: #1DA9FF;" class="popupBtn">确认</view>
				</view>
			</view>
		</uni-popup>
		<view class="vip-bom" @click="nowOpen">
			<view class="vipbtn">
				<view class="pick"> <text style="font-size: 30rpx;">¥</text>{{totalMon || '0.00'}}/元 </view>
				<view class="vipbuy"> 立即开通 </view>
			</view>
		</view>
		<pay @isShow="isShow" :show="payShow" @toPay="toPay"></pay>
		<safe-key @setPass="setPsw" :show="safe_key" :setNum="setNum" :set_pawd="set_pawd" :have_pawd="have_pawd"
			@hide="hideItem" @change="xz_pwad"></safe-key>
		<my-auth-modal></my-auth-modal>
	</view>
</template>
<script>
	import {
		getToken
	} from '@/utils/token.js'
	import safeKey from "@/pages/meSub/components/jiangbei-safekey/jiangbei-safekey.vue"
	import pay from "@/pages/meSub/components/pay.vue"
	import {
		getPaymentPasswordIsExistFun,
		getPaymentPasswordIsExistFunComp,
		insrtPaymentPasswordFun,
		insrtPaymentPasswordFunComp,
		selectPaymentPasswordFun,
		selectPaymentPasswordFunComp
	} from '@/utils/passSet.js'
	import {
		vipSetSearch,
		userVipSearch,
		wxObtainPayJSApi,
		addUserOrder,
		vipDiySearch
	} from '@/common/api/pay.js'
	import {
		duplicateRemoval
	} from "@/utils/common.js"
	export default {
		components: {
			pay,
			safeKey
		},
		data() {
			return {
				itemIndex: 0,
				version: getToken('version'),
				//支付
				safe_key: false,
				have_pawd: false,
				set_pawd: false,
				setNum: [],
				methodOfPayment: null,
				payShow: false,
				totalMon: '',
				userName: '',
				useInfo: {},
				avaTimesList: [],
				lianxi: 'https://job.ydylmold.cn/mingpian/image/vipPage/lianxi.png',
				jiahaoyou: 'https://job.ydylmold.cn/mingpian/image/vipPage/jiahaoyou.png',
				tuiguan: 'https://job.ydylmold.cn/mingpian/image/vipPage/tuiguan.png',
				availableTimes: '',
				//当前轮播图滑动的index
				currentswiperIndex: 0,
				//对应的服务类型
				swiperList: {},
				//当前选中得套餐
				crrentService: '',
				inputValue: '',
				setID:'',
				customtotalprice:"0.00",
				customdiscountprice:"0.00",
				resultpopup:'',
				rmbRate:''
			}
		},
		onLoad: function(option) {
			getToken('version') == 1 ? this.useInfo = getToken('userInfo') : this.useInfo = getToken('complogin')
			this.userName = option.userName
			this.init()
		},
		watch: {
			inputValue: function() {
				if(this.inputValue){
					 var re = /^[0-9]+$/ ; 
						if( re.test(this.inputValue)){
							if(this.inputValue==0){
								uni.showToast({
									title:'数量不能为0！',
									icon:'none'
								})
							}else{
								this.$u.debounce(this.searchEvent(), 1500)
							}
						}else{
							uni.showToast({
								title:'数量必须为数字！',
								icon:'none'
							})
						}
				}else{
					this.customtotalprice="0.00"
					this.customdiscountprice="0.00"
				}
			}
		},
		methods: {
			toUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			popupPay(){
				this.totalMon=this.customtotalprice
				this.crrentService={
					price:'',
					qty:'',
					discount:'',
					setId:''
				}
				this.crrentService['price']=this.resultpopup.disAmt
				this.crrentService['qty']=this.resultpopup.qty
				this.crrentService['discount']=this.resultpopup.discount
				this.crrentService['setId']=this.resultpopup.setId
				//console.log('自定义确定',this.crrentService)
				if(	this.customtotalprice!="0.00"){
					this.closePopup()
					this.inputValue=""
					this.customtotalprice="0.00"
					this.customdiscountprice="0.00"
					this.nowOpen()
				}
			},
			searchEvent(){
				 uni.showLoading({
				 	title: '计算中...'
				 })
				 vipDiySearch({
				 	typeId: getToken('version'),
				 	qty: this.inputValue,
				 	setId: this.setID,
					modleName:'mingpian',
					setType:1
				 }).then(res=>{
					 if(res.data.code==200){
						 uni.hideLoading()
						 this.resultpopup=res.data.data
						 this.customtotalprice= this.resultpopup.disAmt.toFixed(2)
						 this.customdiscountprice =  (this.resultpopup.oldAmt - this.resultpopup.disAmt).toFixed(2)
						 
					 }
				 })
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			closePopup() {
				this.$refs['popup'].close()
				this.inputValue=""
				this.customtotalprice="0.00"
				this.customdiscountprice="0.00"
			},
			customClick() {
				this.$refs['popup'].open()
			},
			nowOpen() {
				if (this.crrentService) {
					this.payShow = true
				} else {
					uni.showToast({
						title: '暂无服务',
						icon: 'none'
					})
				}
			},
			serviceClick(item, index) {
				this.itemIndex = index
				this.totalMon = item.price
				this.crrentService = item
				//console.log("套餐点击",this.crrentService)
			},
			/*支付*/
			setPsw(e) {
				this.set_pawd = e
			},
			async xz_pwad(e) { //验证密码
				let pass = e.number.join('') //密码
				if (this.set_pawd) {
					this.$set(this.setNum, this.setNum.length, pass)
				}
				if (this.setNum.length == 2 && !this.have_pawd) {
					if (this.setNum[0] != this.setNum[1]) {
						uni.showToast({
							title: '两次密码不一致，请重试',
							icon: 'none'
						})
						this.setNum.splice(1, 1) //删除最后一次输入的密码
					} else {
						//console.log('密码设置成功。跳转支付')
						this.safe_key = false
						let setRes = {}
						if (getToken('version') == 1) {
							setRes = await insrtPaymentPasswordFun(pass)
						} else {
							setRes = await insrtPaymentPasswordFunComp(pass)
						}
						if (setRes.code == 1) {
							this.createOrder()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				} else if (this.have_pawd) {
					//判断支付密码是否正确
					let res = {}
					if (getToken('version') == 1) {
						res = await selectPaymentPasswordFun(pass)
					} else {
						res = await selectPaymentPasswordFunComp(pass)
					}
					if (res.data && res.data.code == 0) {
						if (res.data.msg.includes('错误' || '有误')) { //密码输错
							this.set_pawd = true
							this.have_pawd = true
						} else { //密码冻结
							this.set_pawd = false
						}
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					} else {
						this.set_pawd = false
						//校验成功后发起余额支付
						this.createOrder()
					}
				}
			},
			hideItem(e) {
				if (!this.set_pawd || e) {
					this.safe_key = false
					this.setNum = []
					this.set_pawd = false
					this.have_pawd = false
				}
			},
			isShow(e) {
				this.payShow = e
			},
			async toPay(methodOfPayment) {
				this.methodOfPayment = methodOfPayment.code
				this.payShow = false
				if (this.methodOfPayment == 4) { //余额支付
					//判断是否设置密码
					let res = {}
					if (getToken('version') == 1) { //判断支付密码是否存在
						res = await getPaymentPasswordIsExistFun()
					} else {
						res = await getPaymentPasswordIsExistFunComp()
					}
					if (res.data && res.data.code == 1) {
						this.have_pawd = true //密码是否存在
						this.safe_key = true //弹出键盘 进入密码验证
					} else {
						this.have_pawd = false
						this.safe_key = true
					}
				} else { //微信支付
					this.createOrder()
				}
			},
			createOrder() {
				console.log('createOrder');
				console.log('getToken(version)', getToken('version'));
				console.log('getToken(useNum)', getToken('useNum'));
				console.log('getToken(craftsmanId)', getToken('userInfo')['craftsmanId']);
				let params = {}
				if (getToken('version') == 1) {
					params['craftsmanId'] = getToken('useNum')
				} else {
					params['craftsmanId'] = getToken('userInfo')['craftsmanId']
					params['companyId'] = getToken('useNum')
				}
				params.price = (this.crrentService.price / this.crrentService.qty).toFixed(2)
				params.qty = this.crrentService.qty
				params.amt = (this.crrentService.price).toFixed(2)
				params.discount = this.crrentService.discount || 1
				params.fromId = this.crrentService.setId
				params.fromType = 1
				//创建订单
				this.$pay.ordersForNew(params).then(res => {
					let orderParams = {}
					orderParams['chainTypeId'] = 10016
					orderParams['entityName'] = 'usrCvDelivery'
					orderParams['out_trade_no'] = res.data.data.orderNo
					orderParams['goodsName'] = '买vip'
					orderParams['jAmt'] = String(res.data.data.amt)
					params['payType'] = this.methodOfPayment //支付类型
					let methodOfPayment = {
						code: this.methodOfPayment
					}
					this.$pay.aggregatePay({ //支付
						orderParams,
						methodOfPayment,
						success: () => {
							uni.showToast({
								title: "支付成功",
								icon: "none"
							})
							setTimeout(() => {
								this.ToObtainPaymentStatus() //查询支付状态
								this.safe_key = false
							}, 1000)
						},
						error: (err) => {
							uni.showToast({
								title: "支付失败",
								icon: "none"
							})
						}
					})
				})
			},
			init() {
				this.getUserVipSearch()
				this.getVipSetSearch()
			},
			getVipSetSearch() {
				let params = {}
				params['modleName'] = 'mingpian'
				params['typeId'] = getToken("version") == 1 ? 1 : 2
				params['setType'] = 1
				vipSetSearch(params).then(res => {
					if (res.data && res.data.code == 200) {
						let records = ''
						if (getToken("version") == 1) {
							records = res.data.data.records.filter(v => {
								return v.setName != "个人套餐"
							})
						} else {
							records = res.data.data.records.filter(v => {
								return v.setName != "企业套餐" && v.setName != "发布招聘套餐"
							})
						}
						this.swiperList = records
						this.totalMon = this.swiperList[0] && this.swiperList[0].listItem && this.swiperList[0]
							.listItem[0].price || '0.00'
						this.setID=this.swiperList[0] && this.swiperList[0].listItem && this.swiperList[0]
							.listItem[0].setId
						this.rmbRate=this.swiperList[0] && this.swiperList[0].rmbRate
						this.crrentService = this.swiperList[0] && this.swiperList[0].listItem && this.swiperList[
							0].listItem[0]
							
					}
				})
			},
			getUserVipSearch() {
				let params = {}
				if (this.version == 1) {
					params['craftsmanId'] = getToken('useNum')
				} else {
					params['companyId'] = getToken('useNum')
				}
				params['modleName'] = 'mingpian'
				params['setType'] = 1
				userVipSearch(params).then(res => {
					if (res.data.code == 200) {
						let reco = res.data.data.records
						this.avaTimesList = reco
						//console.log("avaTimesList", reco)
						this.availableTimes = reco[0].vipQty || 0
					}
				})
			},
			//查询支付状态
			ToObtainPaymentStatus() {
				this.$pay.getOrderPaymentStatus({
					success: (res) => {
						uni.showToast({
							title: '充值成功',
							icon: 'none'
						})
						this.init()
					},
					error: (error) => {
						uni.showToast({
							title: '充值失败',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.vipPage {
		min-height: calc(100vh - var(--window-top));
		background-color: #F7F8FC;
	}

	.vip-head {
		height: 300rpx;
		background: url('https://job.ydylmold.cn/mingpian/image/vipPage/back.png') no-repeat;
		background-size: 100%;
	}

	.vip-top {
		padding: 38rpx 0 0 28rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;

		.user {
			display: flex;
			align-items: center;

			.user-img {
				width: 98rpx;
				height: 98rpx;
				background: #FFFFFF;
				border-radius: 50%;
			}

			.user-text {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: white;
				margin-left: 10rpx;
			}
		}
	}

	.swiperDot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: gainsboro;
	}

	.con-list2 {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		// background-color: palegoldenrod;
		.con-list2-item {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			border-radius: 0px 32rpx 32rpx 32rpx;
			position: relative;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: black;
			padding: 20rpx 0;
			border: 1px solid rgba(199, 199, 199, 1);

			.list2-text1 {
				font-size: 28rpx;
				font-weight: 500;
				position: absolute;
				left: -4rpx;
				top: -30rpx;
				color: white;
				background-color: #ADADAD;
				padding: 4rpx 24rpx;
				border-radius: 48rpx 48rpx 48rpx 2rpx;
			}

			.list2-text2 {
				font-size: 44rpx;
				font-weight: 600;
				margin: 20rpx 0;
			}
		}

		.con-list2-itemafter {
			width: 215rpx;
			// height: 260rpx;
		}

		.con-list2-itemafter1 {
			width: 332rpx;
			// height: 248rpx;
		}
	}

	.inputText {
		border-bottom: 1rpx solid rgba(166, 166, 166, 1);
		padding: 0 20rpx 20rpx 0;
	}

	.custom {
		margin: 24rpx 0 50rpx 0;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx 0;
		border: 1rpx solid rgba(199, 199, 199, 1);
	}

	.vip-con {
		width: 708rpx;
		background: #F7F8FC;
		border-radius: 40rpx;
		margin-left: 22rpx;
		font-size: 32rpx;
		font-weight: 700;
		padding: 24rpx 20rpx 26rpx 20rpx;
	}

	.popupBox {
		width: 550rpx;
		background-color: white;
		border-radius: 32rpx;
		padding: 50rpx 50rpx;
	}

	.popupBtn {
		padding: 10rpx 60rpx;
		border: 1rpx solid rgba(43, 173, 253, 1);
		border-radius: 42rpx;
		font-size: 32rpx;
		font-weight: 700;
	}

	.vip-bom {

		// position: fixed;
		// bottom: 0;
		// left: 0;
		// background-color: palegoldenrod;
		.vipbtn {
			position: relative;
			width: 680rpx;
			height: 98rpx;
			border-radius: 50rpx;
			background: rgba(29, 169, 255, 1);
			box-shadow: 2rpx 4rpx 15rpx 0rpx rgba(29, 169, 255, 0.2);
			display: flex;
			align-items: center;
		}

		.pick {
			margin: 4rpx 0 0 6rpx;
			/* #ifdef MP-WEIXIN*/
			margin: 6rpx 0 0 6rpx;
			/* #endif*/
			position: absolute;
			left: 0;
			top: 0;
			background: #FFFFFF;
			width: 265rpx;
			height: 90rpx;
			color: #2BADFD;
			font-size: 20px;
			border-bottom-left-radius: 50rpx;
			border-top-left-radius: 50rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-weight: 700;
		}

		.pick::after {
			content: ' ';
			position: absolute;
			top: 0px;
			right: -8px;
			border-width: 45px 8px;
			border-style: solid;
			border-color: #FFFFFF transparent transparent transparent;
		}

		.vipbuy {
			margin: 4rpx 6rpx 0 0;
			position: absolute;
			right: 0;
			top: 0;
			width: 380rpx;
			height: 90rpx;
			border-bottom-right-radius: 50rpx;
			border-top-right-radius: 50rpx;
			font-size: 36rpx;
			font-weight: 700;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
